<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位列表</title>
<!--    <link href="./css/bootstrap.css" rel="stylesheet">-->
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .form-inline{
            margin: 10px 0;
        }
    </style>
    <script src="./js/jq.js"></script>
    <script src="./js/bootstrap.js"></script>
</head>
<body>
<div class="container mt-5">
    <h1 class="mb-4">职位列表</h1>
    <form class="form-inline">
        <div class="form-group">
            <label for="company">公司名称</label>
            <input type="text" class="form-control" id="company" placeholder="模糊查询">
        </div>
        <button type="button" class="btn btn-default" id="querybtn">查询</button>
    </form>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>ID</th>
            <th>职位名称</th>
            <th>类别</th>
            <th>城市</th>
            <th>公司</th>
            <th>公司信息</th>
            <th>作者</th>
            <th>发布时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="job-table-body">
<!--        <tr>-->
<!--            <td>3066</td>-->
<!--            <td>运维工程师</td>-->
<!--            <td>operation</td>-->
<!--            <td>广州</td>-->
<!--            <td>广州市埃特斯通讯设备有限公司</td>-->
<!--            <td>民营,150-500人,通信/电信/网络设备</td>-->
<!--            <td>叶女士,HRBP</td>-->
<!--            <td>2024-01-09</td>-->
<!--        </tr>-->
        </tbody>
    </table>

    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-center" id="pagination">
<!--            <li class="page-item"><a class="page-link" href="?page=608">608</a></li>-->
<!--            <li class="page-item"><a class="page-link" href="?page=609">609</a></li>-->
<!--            <li class="page-item"><a class="page-link" href="?page=610">610</a></li>-->
<!--            <li class="page-item"><a class="page-link" href="?page=611">611</a></li>-->
<!--            <li class="page-item"><a class="page-link" href="?page=612">612</a></li>-->
<!--            <li class="page-item"><a class="page-link" href="?page=613">613</a></li>-->
<!--            <li class="page-item"><a class="page-link" href="?page=614">614</a></li>-->
<!--            <li class="page-item"><a class="page-link" href="?page=615">615</a></li>-->
        </ul>

    </nav>
    总页数:<span id="pages"></span>/总条数:<span id="total"></span>
</div>

<!-- 模态框（Modal） -->
<div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" id="myModal" role="dialog"
     tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-hidden="true" class="close" data-dismiss="modal" type="button">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    修改岗位信息
                </h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal" type="button">关闭
                </button>
                <button class="btn btn-primary" onclick="save()" type="button">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    $(document).ready(function () {
        function fetchJobs(pageNum) {
            let company = $("#company").val()
            $.ajax({
                url: `http://localhost:8080/jobs/api/list?pageNum=${pageNum}&pageSize=5&company=${company}`,
                method: 'GET',
                success: function (response) {
                    if (response.code === 200) {
                        renderTable(response.data.list);
                        renderPagination(response.data);
                        renderTotal(response.data)
                    }
                },
                error: function () {
                    alert('请求数据失败');
                }
            });
        }

        function renderTable(jobs) {
            const $tbody = $('#job-table-body');
            $tbody.empty();
            jobs.forEach(job => {
                $tbody.append(`
                    <tr>
                        <td>${job.id}</td>
                        <td>${job.jobTitle}</td>
                        <td>${job.categoryName}</td>
                        <td>${job.city}</td>
                        <td>${job.company}</td>
                        <td>${job.companyInfo}</td>
                        <td>${job.author}</td>
                        <td>${new Date(job.publishTime).toLocaleDateString()}</td>
                        <td>
                            <button class="btn btn-warning" onclick="showUpdateModal(${job.id})">编辑</button>
                        </td>
</td>
                    </tr>
                `);
            });
        }

        function renderPagination(data) {
            const $pagination = $('#pagination');
            $pagination.empty();

            if (data.hasPreviousPage) {
                $pagination.append(`<li class="page-item"><a class="page-link" href="?page=${data.prePage}">上一页</a></li>`);
            }

            data.navigatepageNums.forEach(page => {
                $pagination.append(`<li class="page-item ${page === data.pageNum ? 'active' : ''}"><a class="page-link" href="?page=${page}">${page}</a></li>`);
            });

            if (data.hasNextPage) {
                $pagination.append(`<li class="page-item"><a class="page-link" href="?page=${data.nextPage}">下一页</a></li>`);
            }

            $('.page-link').click(function (e) {
                e.preventDefault();
                const pageNum = $(this).attr('href').split('=')[1];
                fetchJobs(pageNum);
            });
        }

        function renderTotal(data){
            $("#total").text(data.total)
            $("#pages").text(data.pages)
        }

        $("#querybtn").click(function (){
            fetchJobs(1);
        })

        fetchJobs(1);
    });

    function showUpdateModal(id){
        console.log(id)
        $.getJSON(`http://localhost:8080/jobs/api/get/${id}`,function (res){
            console.log(res.data)
            $('#myModal').modal('show')
            $(".modal-body").text(JSON.stringify(res.data))
        })
    }
</script>
</body>
</html>
